@extends('layout.member.master')
@section('content')
    <div class="card">
        <div class="card-header">
            头像设置
        </div>
        <div class="card-body ">
            <form action="{{route('member.user.update',auth()->user())}}" method="post" id="updataImage">
                @csrf  @method('PUT')
            <div class="avatar avatar-xxl" onclick="upImagePc(this)">
                <input hidden  type="text" name="icon" value="">
                <img style="margin-left: 300px;" src="{{auth()->user()->icon}}" alt="..." class="avatar-img rounded-circle">
            </div>
            </form>
        </div>
        <div class="card-footer text-muted">
          孟菊
        </div>
    </div>
        @push('js')
            <script>
                function upImagePc() {
                    require(['hdjs'], function (hdjs) {
                        var options = {
                            multiple: false,//是否允许多图上传
                            //data是向后台服务器提交的POST数据
                            data: {},
                        };
                        hdjs.image(function (images) {
                            //上传成功的图片，数组类型
                            $("[name='icon']").val(images[0]);
                            $(".avatar img").attr('src', images[0]);
                            $('#updataImage').submit();

                        }, options)
                    });
                }
            </script>

    @endpush

    @push('css')
        <style>
          .avatar{
              cursor: pointer;
          }
        </style>
    @endpush

    @endsection
